<template>
    
    
        <div class="container">
            <div class="title">
                <h1>内蒙古博驰物联网平台</h1>
            </div>
            <div class="box">
                <div class="cover"></div>
                <div class="shadow"></div>
                <div class="content">
                    <a-form class="form" :model="formState" @finish="onFinish" @finishFailed="onFinishFailed">
                        <h3 class="logo"><ion-icon name="keypad-outline"></ion-icon></h3>
                        <h2>登录</h2>

                        <div class="inputBox" name="user">
                            <a-form-item name="user" :rules="[{ required: true, message: '登录账号不能为空!' }]">
                                <!-- <a-input placeholder="请输入用户账号" v-model:value="formState.user" /> -->
                                <input type="text" v-model="formState.user" required>
                                <ion-icon name="person-outline"></ion-icon>
                                <span>用户账号</span>
                            </a-form-item>
                            <!-- <input type="text"  v-model="formState.user" required>  
                        <ion-icon name="person-outline"></ion-icon>  
                        <span>Username</span>   -->
                        </div>
                        <div class="inputBox" name="password">
                            <a-form-item name="password" :rules="[{ required: true, message: '登录密码不能为空!' }]">
                                <!-- <a-input-password placeholder="请输入登录密码" v-model:value="formState.password" /> -->
                                <input type="password" v-model="formState.password" required>
                                <ion-icon name="lock-closed-outline"></ion-icon>
                                <span>登录密码</span>
                            </a-form-item>
                            <!-- <input type="password" v-model="formState.password" required>
                        <ion-icon name="lock-closed-outline"></ion-icon>
                        <span>Password</span> -->
                        </div>
                        <div class="links">
                            <a href="#"><ion-icon name="help-circle-outline"></ion-icon>Forget Password</a>
                            <a href="#"><ion-icon name="person-add-outline"></ion-icon>Sign up</a>
                        </div>
                        <div class="inputBox">
                            <input type="submit" html-type="submit" value="登录">
                            <!-- <a-button html-type="submit">登录</a-button>  -->
                        </div>
                        <!-- <a-card title="登录" style="width: 320px"> -->

                        <!-- <a-form class="form" :model="formState" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }"
                autocomplete="off" @finish="onFinish" @finishFailed="onFinishFailed">
                <a-form-item label="用户账号" name="user" :rules="[{ required: true, message: '登录账号不能为空!' }]">
                    <a-input placeholder="请输入用户账号" v-model:value="formState.user" />
                </a-form-item>

                <a-form-item label="登录密码" name="password" :rules="[{ required: true, message: '登录密码不能为空!' }]">
                    <a-input-password placeholder="请输入登录密码" v-model:value="formState.password" />
                </a-form-item>

                <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
                    <a-button type="primary" html-type="submit">登录</a-button>
                </a-form-item>
            </a-form> -->


                        <!-- </a-card> -->

                    </a-form>
                </div>
            </div>
        </div>

</template>
<!-- <script src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script> -->
<!-- <script src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script> -->
<script setup lang="ts">
import { computed, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '/@/store/modules/user';
import { message } from 'ant-design-vue';
import { useMenuStore } from '/@/store/modules/menu';
const userStore = useUserStore()
const menuStore = useMenuStore()
const router = useRouter()
interface FormState {
    user: string;
    password: string;
    timestamp: string;
}
const formState = reactive<FormState>({
    user: 'admin',
    password: '123456',
    timestamp: ''
});
const login = () => {
    console.log('ttyyy--');

}
const onFinish = (values: any) => {
    userStore.login(
        values.user,
        values.password,
        values.timestamp
    ).then(async () => {
        message.success('登录成功！')
        console.log('登录成功');
        // 初始化权限标识
        let P = await userStore.initPermCode()

        console.log('userStore.initPermCode',P);
        
        // .then(()=>{
        //   // 初始化菜单
       menuStore.initMenu()
        router.replace({
            path: '/'
        })
        // })
        // 初始化用户信息
        userStore.getUserInfo()
    }).catch((e: Error) => {
        message.error(e.message)
    })
};
const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
};

const token = computed(() => {
    return userStore.getToken
})

</script>
<style lang="less" scoped>
// * {
//     margin: 0;
//     padding: 0;
//     box-sizing: border-box;
// }

// body {
//     display: flex;
//     justify-content: center;
//     align-items: center;
//     min-height: 100vh;
//     overflow: hidden;
//     background: #cdf1e1;
// }

    .title {
        position: relative;
        top: -20px;
        left: -50px;
        text-align: center;
        margin-bottom: 80px;
        font-size: 20px;
        letter-spacing: 12px;
    }
    .container .box {
        position: relative;
        width: 400px;
        height: 480px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .container .box::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 25px;
        height: 100%;
        background: linear-gradient(#fff, #fff, #e3e3e3);
        filter: blur(1px);
        z-index: 1;
    }

    .container .box::after {
        content: "";
        position: absolute;
        top: 1;
        right: -1px;
        width: 25px;
        height: 100%;
        background: #9d9d9d;
        filter: blur(1px);
        z-index: 1;
    }

    .container .box .shadow {
        position: absolute;
        width: 100%;
        height: 100%;
        background: #eee;
    }

    .container .box .shadow::before {
        content: "";
        position: absolute;
        top: 0;
        left: calc(100% + 96px);
        width: 120%;
        height: 240%;
        background: linear-gradient(rgba(0, 0, 0, 0.075), transparent);
        transform: skewX(45deg);
        /*定义沿着X轴的2D倾斜转换。*/
    }

    .container .box .shadow::after {
        content: "";
        position: absolute;
        bottom: -200%;
        left: calc(100% + 80px);
        width: 100%;
        height: 200%;
        background: linear-gradient(rgba(0, 0, 0, 0.075), transparent);
        transform: skewX(45deg);
        /*定义沿着X轴的2D倾斜转换。*/
    }

    .cover {
        position: absolute;
        top: 0;
        left: -100px;
        width: 100px;
        height: 100px;
        background: #cdf1e1;
        z-index: 10;
    }

    .content {
        position: relative;
        width: 100%;
        height: 100%;
        background: linear-gradient(#dbdae1, #a3aaba);
        box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2),
            15px 15px 15px rgba(0, 0, 0, 0.2),
            20px 10px 20px rgba(0, 0, 0, 0.2),
            50px 50px 80px rgba(0, 0, 0, 0.2),
            inset 3px 3px 2px #fff;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .content .form {
        position: relative;
        width: 260px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .logo {
        width: 70px;
        height: 70px;
        background: #444;
        color: #fff;
        font-size: 1.75em;
        margin-bottom: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 10px;
    }

    h2 {
        margin-top: 10px;
    }

    .content .form h2 {
        font-size: 2em;
        color: #444;
        margin-bottom: 10px;
    }

    .content .form .inputBox {
        position: relative;
        width: 100%;
        margin-top: 30px;
    }

    .content .form .inputBox input {
        position: relative;
        width: 100%;
        padding: 10px 0 10px 25px;
        font-size: 1.25em;
        background: transparent;
        box-shadow: none;
        border: none;
        border-bottom: 3px solid #444;
        outline: none;
        color: #444;
    }


    .content .form .inputBox ion-icon {
        position: absolute;
        left: 0;
        bottom: 15px;
        font-size: 1.25em;
        color: #444;
    }

    .content .form .inputBox span {
        position: absolute;
        left: 0;
        padding: 10px 0 10px 25px;
        font-size: 1.25em;
        pointer-events: none;
        color: #444;
        transition: 0.5s;
    }

    .inputBox {
        height: 46px;
    }

    .content .form .inputBox input:focus~span,
    .content .form .inputBox input:valid~span {
        transform: translateY(-20px);
        font-size: 0.9em;
        background: #444;
        color: #fff;
        padding: 2px 4px;
    }

    .content .form .links {
        width: 100%;
        margin-top: 15px;
        display: flex;
        justify-content: center;
    }

    .content .form .links a {
        margin: 0 10px;
        color: #444;
        text-decoration: none;

    }

    .content .form .inputBox input[type="submit"] {
        background: #444;
        color: #fff;
        cursor: pointer;
        padding: 10px;
    }

    .content .form .inputBox input[type="submit"]:hover {
        background: #333;
    }

</style>